<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>

<head lang="en">
<meta charset="UTF-8">
<title>有间花店 | 后台管理</title>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<!-- 引入css样式-->
<link rel="stylesheet" type="text/css" href="css/admin.css"
	media="screen">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/admin.js"></script>

<style type="text/css">
a:focus, a:hover {
	text-decoration: none;
}

.panel-body {
	text-align: left;
}

textarea {
	resize: none;
}

#mytable th, #mytable td {
	text-align: center;
	vertical-align: middle;
	font-size: 14px;
}
/*点击修改出现提示框*/
.click {
	margin-top: -320px;
	margin-right: 48px;
	float: right;
}

.modal-open .modal {
	overflow-y: hidden;
	width: 620px;
	height: 440px;
	margin-top: 90px;
	margin-left: 440px;
	border-radius: 10%;
	border: 1px solid #cccccc;
	background: #CAE8EA;
	display: none;
}

.photo img {
	width: 70px;
	height: 70px;
	border: transparent;
	text-align: center;
}
</style>
</head>

<body>

	<div class="wrap">
		<!-- 左边内容 -->
		<jsp:include page="/admin_menu.jsp"></jsp:include>

		<!-- 右边内容 -->
		<div id="right" class="tab-content right">

			<!-- 模块一商品查询-->
			<div>
				<!-- 头部商品查询框-->
				<div class="panel panel-info">
					<div class="panel-heading">位置：商品查询</div>
					<div class="panel-body">
						<!--查询按钮及输入框-->
						<form class="form-inline" action="/select.do">
							<input type="hidden"id="hidden" value="${select}">
							<select class="form-control" name="select" id="select1" >
								<option name="all" value="all">请选择查询方式</option>
								<option name="pid" value="pid">编号</option>
								<option name="pname" value="pname">商品名称</option>
								<option name="pmaterial" value="pmaterial">鲜花素材</option>
								<option name="num" value="num">库存</option>
								<option name="cname" value="cname">分类</option>
							</select>
							<div class="form-group">
								<input type="search" class="form-control"
									id="exampleInputEmail2" placeholder="请输入查询的商品" name="exampleInputEmail2" value="${exampleInputEmail2}">
							</div>
							<!-- 下拉选择框-->

							<!-- 查询按钮-->
							<button type="button" id="btn_select" class="btn btn-default" onclick="selectPid()">查询</button>
						</form>
					</div>
				</div>
				<!-- 商品查询，修改，删除表格，bootstrap自适应表格-->
				<div class="table-responsive">
					<table class="table" id="mytable">
						<tr >
							<th>商品编号</th>
							<th>商品名称</th>
							<th>图片</th>
							<th>上市时间</th>
							<th>鲜花素材</th>
							<th>库存量</th>
							<th>市场价</th>
							<th>定价</th>
							<th>花语</th>
							<th>是否上架</th>
							<th>是否特价</th>
							<th>是否热门</th>
							<th>操作</th>
						</tr>


						<c:choose>
							<c:when test="${!empty products}">
								<c:forEach var="product"  items="${products}">
									<tr >
										<c:if test="${product.num==0}">
											<td style="font-size: 16px; font-weight: bold; background-color: #ff7288">${product.pid}</td>
											<td style="background-color: #ff7288">${product.pname}</td>
											<td style="background-color: #ff7288"><img src="${product.pimage}"
																					   style="width: 50px; height: 50px"></td>
											<td style="background-color: #ff7288">${product.pdate}</td>
											<td style="background-color: #ff7288">${product.pmaterial}</td>
											<td style="background-color: #ff7288">${product.num}</td>
											<td style="background-color: #ff7288">${product.market_price}</td>
											<td style="background-color: #ff7288">${product.shop_price}</td>
											<td style="background-color: #ff7288">${product.pdesc}</td>
											<td style="background-color: #ff7288">${product.pflag==1? "是":"否"}</td>
											<td style="background-color: #ff7288">${product.pbargain==1? "是":"否"}</td>
											<td style="background-color: #ff7288">${product.is_hot==1? "是":"否"}</td>
											<td style="background-color: #ff7288">
												<button type="button" class="btn btn-primary"
														data-toggle="modal" id="${product.pid}"
														data-target="#editProduct" onclick="openEditModal(this)">
													<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
												</button>
												<button type="button" class="btn btn btn-info"
														data-toggle="button" onclick="deleteProduct(${product.pid})">
													<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
												</button>
											</td>
										</c:if>
										<c:if test="${product.num>0&&product.num<10}">
											<td style="font-size: 16px; font-weight: bold;background-color: #ffd764">${product.pid}</td>
											<td style="background-color: #ffd764">${product.pname}</td>
											<td style="background-color: #ffd764"><img src="${product.pimage}"
													 style="width: 50px; height: 50px"></td>
											<td style="background-color: #ffd764">${product.pdate}</td>
											<td style="background-color: #ffd764">${product.pmaterial}</td>
											<td style="background-color: #ffd764">${product.num}</td>
											<td style="background-color: #ffd764">${product.market_price}</td>
											<td style="background-color: #ffd764">${product.shop_price}</td>
											<td style="background-color: #ffd764">${product.pdesc}</td>
											<td style="background-color: #ffd764">${product.pflag==1? "是":"否"}</td>
											<td style="background-color: #ffd764">${product.pbargain==1? "是":"否"}</td>
											<td style="background-color: #ffd764">${product.is_hot==1? "是":"否"}</td>
											<td style="background-color: #ffd764">
												<button type="button" class="btn btn-primary"
														data-toggle="modal" id="${product.pid}"
														data-target="#editProduct" onclick="openEditModal(this)">
													<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
												</button>
												<button type="button" class="btn btn btn-info"
														data-toggle="button" onclick="deleteProduct(${product.pid})">
													<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
												</button>
											</td>
										</c:if>
										<c:if test="${product.num>10}">
											<td style="font-size: 16px; font-weight: bold;">${product.pid}</td>
											<td>${product.pname}</td>
											<td><img src="${product.pimage}"
													 style="width: 50px; height: 50px"></td>
											<td>${product.pdate}</td>
											<td>${product.pmaterial}</td>
											<td>${product.num}</td>
											<td>${product.market_price}</td>
											<td>${product.shop_price}</td>
											<td>${product.pdesc}</td>
											<td>${product.pflag==1? "是":"否"}</td>
											<td>${product.pbargain==1? "是":"否"}</td>
											<td>${product.is_hot==1? "是":"否"}</td>
											<td>
												<button type="button" class="btn btn-primary"
														data-toggle="modal" id="${product.pid}"
														data-target="#editProduct" onclick="openEditModal(this)">
													<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
												</button>
												<button type="button" class="btn btn btn-info"
														data-toggle="button" onclick="deleteProduct(${product.pid})">
													<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
												</button>
											</td>
										</c:if>
									</tr>

								</c:forEach>
							</c:when>
							<c:otherwise>
								暂无商品
							</c:otherwise>
						</c:choose>
					</table>


				</div>
				<script> 
			    	function updateProduct(){
			    		//alert($("#sp_add_left1").serialize())
			    		var url = "${pageContext.request.contextPath}/updateProduct.do?pid=" + $("#pid").val();
			    		$.post(url, $("#sp_add_left1").serialize(), function(data){
							if(data == "OK"){
								alert("商品修改成功！");
								window.location.reload();
							}else{
								alert("商品修改失败！");
								window.location.reload();
							}
						}) 
			    	}
			    	function inputImg() {
			           var input = document.getElementById('files');
			           var url = window.URL.createObjectURL(input.files[0]);
			           var name = input.files[0].name;
			           //动态赋予图片路径
			           $('#oImg').attr("src", url);
			           $('#pimage').val("product/" + name);
			        }
			    </script>

				<!-- footer-->
				<div class="footer">
					<c:if test="${PAGE.isFirstPage == true}">
						<a class="btn btn-info" role="button">首页</a>
					</c:if>
					<c:if test="${PAGE.isFirstPage == false}">
						<button class="btn btn-info"
							onclick="herad()">首页</button>
					</c:if>
					<c:if test="${PAGE.hasPreviousPage == true}">
						<button class="btn btn-info" onclick="shangyiye()">上一页</button>
					</c:if>
					<c:if test="${PAGE.hasPreviousPage == false}">
						<a class="btn btn-info" role="button">上一页</a>
					</c:if>
					<c:if test="${PAGE.hasNextPage == true}">
						<button class="btn btn-info" onclick="xiayiye()">下一页</button>
					</c:if>
					<c:if test="${PAGE.hasNextPage == false}">
						<a class="btn btn-info" role="button">下一页</a>
					</c:if>
					<c:if test="${PAGE.isLastPage == true}">
						<a class="btn btn-info" role="button">尾页</a>
					</c:if>
					<c:if test="${PAGE.isLastPage == false}">
						<button class="btn btn-info" onclick="lastPage()">尾页</button>
					</c:if>
					<label for="pageNum">跳转</label> <input type="text" id="pageNum"
						value="${PAGE.pageNum}" oninput="value=value.replace(/[^\d]/g,'')"
						style="width: 50px;"> <label for="pageNum">页，共${PAGE.pageNum}/${PAGE.pages}页</label>
					<button class="btn btn-default" type="button" onclick="jumpPage()">确定</button>
				</div>
			</div>

			<script type="text/javascript">
				function jumpPage(){
					var select=$("#select1").val();
					var exampleInputEmail2=$("#exampleInputEmail2").val();
					var pageNum = document.getElementById("pageNum").value
					var url = "${pageContext.request.contextPath}/select.do?startPage=" + pageNum+"&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;
					window.location.href = url;
				}
			</script>
			<script type="text/javascript">
				reg.test = function (val) {
					return false;
				}

				function selectPid() {
					var select=$("#select1").val();
					var exampleInputEmail2=$("#exampleInputEmail2").val();

					if($("#exampleInputEmail2").val()==null|| $("#exampleInputEmail2").val() == ""){
						location.href="/select.do?startPage=${PAGE.prePage}&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;

						return true;
					}


					if ($("#select1").val() == "pid" && $("#exampleInputEmail2").val() != null && $("#exampleInputEmail2").val() != "") {
						var reg = /^\+?[1-9][0-9]*$/;
						if (!reg.test(($("#exampleInputEmail2").val()))) {
							alert("查询编号请输入数字");
							return false;
						} else {
							location.href="/select.do?startPage=${PAGE.prePage}&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;

							return true;
						}
					} else if ($("#select1").val() == "num" && $("#exampleInputEmail2").val() != null && $("#exampleInputEmail2").val() != ""){
						var reg = /^\+?[0-9][0-9]*$/;
						if (!reg.test(($("#exampleInputEmail2").val()))) {
							alert("查询库存请输入数字");
							return false;
						} else {
							location.href="/select.do?startPage=${PAGE.prePage}&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;

							return true;
						}
					} else {
						location.href="/select.do?startPage=${PAGE.prePage}&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;
						return true;
					}



				}




				function deleteProduct(pid){
					if(window.confirm("确定要删除该商品吗？")){
						//获取pid的值
						//window.location.href = "${pageContext.request.contextPath}/deleteProduct.do?pid="+pid;
						$.ajax({

								url:"${pageContext.request.contextPath}/deleteProduct.do",
								data:{"pid": pid},
								success:function(data) {

							if (data == "OK") {
								alert("商品删除成功！");
								window.location.reload();
							}
							if (data == "NO") {
								alert("商品删除失败！");
								window.location.reload();
							}
						}
						})
					}else{
						return false;
					}
				}

				function openEditModal(obj){
					/*alert("******************")
                    //获取当前点击行的id
                    var $td = $(obj).parents('tr').children('td');
                    $("#pid").val($td.eq(0).text());
                    $("#pname").val($td.eq(1).text());
                    $("#pdate").val($td.eq(3).text());
                    $("#pmaterial").val($td.eq(4).text());
                    $("#num").val($td.eq(5).text());
                    $("#market_price").val($td.eq(6).text());
                    $("#shop_price").val($td.eq(7).text());
                    $("#pdesc").val($td.eq(8).text());
                    $("#pflag").val($td.eq(9).text());
                    $("#pbargain").val($td.eq(10).text());
                    $("#is_hot").val($td.eq(11).text());*/


					var id = $(obj).attr("id");//获取修改商品的id

					location.href="/updataproductByPid.do?pid="+id;


					/*var imgname = document.getElementById("mytable").rows[id % 10].cells[2];

                    //alert(imgs+"*********")
                    //var img =  imgs.src
                    var img = imgname.getElementsByTagName("img")[0].src;
                    alert("***"+img+"*****"+id);

                    //将图片路径赋值给src
                    $('#oImg').attr("src", img);
                    $('#pimage').val(img);*/
				}

			</script>
			<script>

				function shangyiye() {
					var select=$("#select1").val();
					var exampleInputEmail2=$("#exampleInputEmail2").val();
					location.href="/select.do?startPage=${PAGE.prePage}&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;
				}

				function xiayiye() {
					var select=$("#select1").val();
					var exampleInputEmail2=$("#exampleInputEmail2").val();
					location.href="/select.do?startPage=${PAGE.nextPage}&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;
				}

				function lastPage() {
					var select=$("#select1").val();
					var exampleInputEmail2=$("#exampleInputEmail2").val();
					location.href="/select.do?startPage=${PAGE.pages}&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;

				}
				function herad() {
					var select=$("#select1").val();
					var exampleInputEmail2=$("#exampleInputEmail2").val();
					location.href="/select.do?startPage=1&&select="+select+"&&exampleInputEmail2="+exampleInputEmail2;
				}

			</script>
			<script>

				var select = $("#hidden").val();
				switch (select) {
					case "all": $("option[name='all']").attr("selected","selected"),$("#exampleInputEmail2").val(null);break;
					case "pid": $("option[name='pid']").attr("selected","selected");break;
					case "pname": $("option[name='pname']").attr("selected","selected");break;
					case "pmaterial": $("option[name='pmaterial']").attr("selected","selected");break;
					case "num": $("option[name='num']").attr("selected","selected");break;
					case "cname": $("option[name='cname']").attr("selected","selected");break;
					default : $("option[name='all']").attr("selected","selected");

				}




			</script>


		</div>
	</div>

</body>

</html>